<!-- 专家指导详情页面 -->
<template>
    <div class="guide-detail-content">
        <div class="detail-item">
            <div class="item-text">问题：</div>{{ detailObj.question }}
        </div>
        <div class="detail-item">
            <div class="item-text">回答：</div>
            <div class="detail-content">{{ detailObj.answer }}</div>
        </div>

        <div style="width: 100%;;height:35px;line-height: 35px; margin-top: 50px;
        position: absolute;bottom: 30px;display: flex;justify-content: center;">
            <el-button @click="comeBack">
                <el-icon>
                    <DArrowLeft />
                </el-icon>&nbsp; 返 &nbsp;回
            </el-button>
        </div>

    </div>
</template>

<script setup>
import { questionDetail } from "@/api/order";
import { ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
const detailObj = ref({})

// 获取数据
const getData = () => {
    questionDetail({ id: route.params.id }).then(res => {
        detailObj.value = res.data
    }).catch(err => {
        console.log(err)
    })
}

getData()

const comeBack = () => {
    router.back()
}

</script>

<style lang="scss" scoped>
.guide-detail-content {
    width: 1100px;
    height: 80%;
    background: #fff;
    margin: 10px auto;
    padding: 10px 20px;
    position: relative;

    .detail-item {
        display: flex;
        align-items: center;
        border: 1px dashed darkseagreen;
        // background: #fff;
        margin: 10px 0;
        padding: 10px 20px;
        border-radius: 6px;
        display: flex;
        align-items: flex-start;

        .item-text {
            font-weight: bold;
            width: 50px;
        }

        .detail-content {
            text-align: left;
            width: 1000px;
            /*超出的部分隐藏*/
            overflow: hidden;
            /*文字用省略号替代超出的部分*/
            text-overflow: ellipsis;
            word-break: break-all;
            /*弹性伸缩盒子模型显示*/
            display: -webkit-box;
            /*限制在一个块元素显示文本的行数*/
            -webkit-line-clamp: 20;
            /*设置或检索伸缩盒对象的子元素排列方式*/
            -webkit-box-orient: vertical;
        }
    }
}
</style>